<template>
  <div class="report-generator-container">
    <div class="page-header">
      <div class="page-title">检测报告生成</div>
      <div class="page-actions">
        <el-button icon="Refresh" @click="resetForm">重置</el-button>
        <el-button type="primary" icon="Document" @click="generateReport" :loading="isGenerating">生成报告</el-button>
      </div>
    </div>

    <!-- 报告生成表单 -->
    <el-card class="report-form-card">
      <template #header>
        <div class="card-header">报告配置</div>
      </template>
      
      <el-form :model="reportForm" label-width="100px" :disabled="isGenerating">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报告类型">
              <el-radio-group v-model="reportForm.type">
                <el-radio-button label="single">单资产报告</el-radio-button>
                <el-radio-button label="multiple">多资产报告</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告格式">
              <el-select v-model="reportForm.format" placeholder="选择报告格式" style="width: 100%">
                <el-option label="PDF" value="pdf" />
                <el-option label="Word文档" value="docx" />
                <el-option label="HTML" value="html" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选择资产" v-if="reportForm.type === 'single'">
              <el-select 
                v-model="reportForm.assetId" 
                placeholder="选择资产"
                filterable
                style="width: 100%">
                <el-option 
                  v-for="item in assetOptions" 
                  :key="item.id" 
                  :label="item.name" 
                  :value="item.id">
                  <span>{{ item.name }}</span>
                  <span style="color: var(--text-color-secondary); margin-left: 15px">{{ item.ip }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资产组" v-else>
              <el-select 
                v-model="reportForm.assetGroupId" 
                placeholder="选择资产组"
                filterable
                style="width: 100%">
                <el-option 
                  v-for="item in assetGroupOptions" 
                  :key="item.id" 
                  :label="item.name" 
                  :value="item.id">
                  <span>{{ item.name }}</span>
                  <span style="color: var(--text-color-secondary); margin-left: 15px">({{ item.count }}个资产)</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告模板">
              <el-select 
                v-model="reportForm.templateId" 
                placeholder="选择报告模板"
                style="width: 100%">
                <el-option 
                  v-for="item in templateOptions" 
                  :key="item.id" 
                  :label="item.name" 
                  :value="item.id">
                  <span>{{ item.name }}</span>
                  <span style="color: var(--text-color-secondary); margin-left: 15px">{{ item.description }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报告标题">
              <el-input v-model="reportForm.title" placeholder="请输入报告标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告日期">
              <el-date-picker
                v-model="reportForm.date"
                type="date"
                placeholder="选择报告日期"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="报告摘要">
          <el-input 
            v-model="reportForm.summary" 
            type="textarea" 
            rows="3"
            placeholder="请输入报告摘要内容" />
        </el-form-item>
        
        <!-- 报告章节配置 -->
        <el-form-item label="报告章节">
          <div class="section-config">
            <el-checkbox-group v-model="reportForm.sections">
              <el-row :gutter="20">
                <el-col :span="8" v-for="section in sectionOptions" :key="section.id">
                  <el-checkbox :label="section.id">{{ section.name }}</el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
        </el-form-item>
        
        <el-form-item label="其他选项">
          <el-space wrap>
            <el-checkbox v-model="reportForm.includeExecutiveSummary">包含管理摘要</el-checkbox>
            <el-checkbox v-model="reportForm.includeDetailedFindings">包含详细发现</el-checkbox>
            <el-checkbox v-model="reportForm.includeAttachments">包含附件</el-checkbox>
            <el-checkbox v-model="reportForm.includeRemediation">包含修复建议</el-checkbox>
            <el-checkbox v-model="reportForm.includeScreenshots">包含截图证据</el-checkbox>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 报告预览 -->
    <el-card v-if="previewData" class="report-preview-card">
      <template #header>
        <div class="card-header">
          <span>报告预览</span>
          <div>
            <el-button type="primary" size="small" icon="Download" @click="downloadReport">下载报告</el-button>
          </div>
        </div>
      </template>
      
      <div class="report-preview">
        <div class="report-header">
          <h1>{{ previewData.title }}</h1>
          <div class="report-meta">
            <div class="report-date">日期: {{ previewData.date }}</div>
            <div class="report-asset">资产: {{ previewData.assetName }}</div>
          </div>
        </div>
        
        <div class="report-summary">
          <h2>报告摘要</h2>
          <p>{{ previewData.summary }}</p>
        </div>
        
        <div class="report-statistics">
          <h2>风险统计</h2>
          <div class="stats-graph">
            <div class="severity-distribution">
              <div class="severity-label">漏洞风险等级分布</div>
              <div class="severity-chart">
                <div class="chart-bar critical" style="width: 35%"><span>严重: {{ previewData.stats.critical }}</span></div>
                <div class="chart-bar high" style="width: 25%"><span>高危: {{ previewData.stats.high }}</span></div>
                <div class="chart-bar medium" style="width: 20%"><span>中危: {{ previewData.stats.medium }}</span></div>
                <div class="chart-bar low" style="width: 10%"><span>低危: {{ previewData.stats.low }}</span></div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="report-findings">
          <h2>主要发现</h2>
          <el-table :data="previewData.findings" border style="width: 100%">
            <el-table-column prop="id" label="漏洞ID" width="120" />
            <el-table-column prop="name" label="漏洞名称" min-width="200" />
            <el-table-column prop="type" label="漏洞类型" width="150" />
            <el-table-column label="风险等级" width="100">
              <template #default="{ row }">
                <el-tag :type="getTagType(row.level)">{{ formatLevel(row.level) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template #default="{ row }">
                <el-tag type="success" v-if="row.status === 'verified'">已验证</el-tag>
                <el-tag type="info" v-else>未验证</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="report-more-preview">
          <el-empty description="更多内容请下载完整报告查看">
            <template #image>
              <el-icon class="empty-icon"><Document /></el-icon>
            </template>
          </el-empty>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'

// 报告生成状态
const isGenerating = ref(false)

// 报告表单
const reportForm = reactive({
  type: 'single',
  format: 'pdf',
  assetId: '',
  assetGroupId: '',
  templateId: '1',
  title: '',
  date: new Date(),
  summary: '',
  sections: ['overview', 'findings', 'methodology', 'recommendations'],
  includeExecutiveSummary: true,
  includeDetailedFindings: true,
  includeAttachments: false,
  includeRemediation: true,
  includeScreenshots: true
})

// 资产选项
const assetOptions = ref([
  { id: '1', name: '内部Web服务器', ip: '192.168.1.100' },
  { id: '2', name: '数据库服务器', ip: '192.168.1.101' },
  { id: '3', name: '文件服务器', ip: '192.168.1.102' },
  { id: '4', name: '测试服务器', ip: '192.168.2.100' },
  { id: '5', name: '生产环境服务器', ip: '10.10.10.50' }
])

// 资产组选项
const assetGroupOptions = ref([
  { id: '1', name: '研发部资产组', count: 5 },
  { id: '2', name: '运维部资产组', count: 8 },
  { id: '3', name: '测试环境', count: 3 },
  { id: '4', name: '生产环境', count: 12 }
])

// 模板选项
const templateOptions = ref([
  { id: '1', name: '标准漏洞报告', description: '包含详细漏洞信息和修复建议' },
  { id: '2', name: '执行摘要报告', description: '面向管理层的简洁报告' },
  { id: '3', name: '安全合规报告', description: '符合安全合规标准的报告' },
  { id: '4', name: '技术详情报告', description: '包含技术细节的完整报告' }
])

// 章节选项
const sectionOptions = ref([
  { id: 'overview', name: '概述' },
  { id: 'findings', name: '漏洞发现' },
  { id: 'methodology', name: '测试方法' },
  { id: 'recommendations', name: '修复建议' },
  { id: 'risk_assessment', name: '风险评估' },
  { id: 'appendices', name: '附录' },
  { id: 'evidence', name: '证据' },
  { id: 'references', name: '参考资料' },
  { id: 'technical_details', name: '技术细节' }
])

// 报告预览数据
const previewData = ref(null)

// 格式化危害等级
const formatLevel = (level) => {
  const levelMap = {
    'critical': '严重',
    'high': '高危',
    'medium': '中危',
    'low': '低危'
  }
  return levelMap[level] || level
}

// 获取标签类型
const getTagType = (level) => {
  const typeMap = {
    'critical': 'danger',
    'high': 'warning',
    'medium': '',
    'low': 'info'
  }
  return typeMap[level] || ''
}

// 重置表单
const resetForm = () => {
  Object.assign(reportForm, {
    type: 'single',
    format: 'pdf',
    assetId: '',
    assetGroupId: '',
    templateId: '1',
    title: '',
    date: new Date(),
    summary: '',
    sections: ['overview', 'findings', 'methodology', 'recommendations'],
    includeExecutiveSummary: true,
    includeDetailedFindings: true,
    includeAttachments: false,
    includeRemediation: true,
    includeScreenshots: true
  })
  previewData.value = null
}

// 生成报告
const generateReport = () => {
  // 验证表单
  if (reportForm.type === 'single' && !reportForm.assetId) {
    ElMessage.warning('请选择资产')
    return
  }
  
  if (reportForm.type === 'multiple' && !reportForm.assetGroupId) {
    ElMessage.warning('请选择资产组')
    return
  }
  
  if (!reportForm.title) {
    ElMessage.warning('请输入报告标题')
    return
  }
  
  if (!reportForm.summary) {
    ElMessage.warning('请输入报告摘要')
    return
  }
  
  isGenerating.value = true
  
  // 模拟生成报告的API调用
  setTimeout(() => {
    // 创建预览数据
    const asset = reportForm.type === 'single' 
      ? assetOptions.value.find(item => item.id === reportForm.assetId)
      : assetGroupOptions.value.find(item => item.id === reportForm.assetGroupId)
    
    previewData.value = {
      title: reportForm.title,
      date: reportForm.date.toLocaleDateString(),
      assetName: asset ? asset.name : '未指定资产',
      summary: reportForm.summary,
      stats: {
        critical: 3,
        high: 5,
        medium: 8,
        low: 4
      },
      findings: [
        {
          id: 'VLN-2023042',
          name: 'Apache Struts2 远程命令执行漏洞',
          type: '远程命令执行',
          level: 'critical',
          status: 'verified'
        },
        {
          id: 'VLN-2023036',
          name: 'MySQL 权限提升漏洞',
          type: '权限提升',
          level: 'high',
          status: 'verified'
        },
        {
          id: 'VLN-2023029',
          name: 'Nginx 缓冲区溢出漏洞',
          type: '缓冲区溢出',
          level: 'medium',
          status: 'pending'
        },
        {
          id: 'VLN-2023018',
          name: 'Web应用XSS漏洞',
          type: '跨站脚本',
          level: 'medium',
          status: 'verified'
        },
        {
          id: 'VLN-2023011',
          name: 'Web应用CSRF漏洞',
          type: '跨站请求伪造',
          level: 'low',
          status: 'pending'
        }
      ]
    }
    
    isGenerating.value = false
    ElMessage.success('报告生成成功')
  }, 1500)
}

// 下载报告
const downloadReport = () => {
  ElMessage.success(`正在下载${reportForm.format.toUpperCase()}格式的报告...`)
}

// 初始化
onMounted(() => {
  // 设置默认值
  reportForm.title = `漏洞扫描报告 - ${new Date().toLocaleDateString()}`
  reportForm.summary = '本报告包含对目标资产的漏洞扫描结果，详细列出了发现的漏洞、风险等级以及修复建议。'
})
</script>

<style lang="scss" scoped>
.report-generator-container {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .page-title {
      font-size: 20px;
      font-weight: bold;
      color: var(--text-color);
    }
    
    .page-actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .report-form-card {
    margin-bottom: 20px;
    
    .card-header {
      font-weight: bold;
    }
    
    .section-config {
      margin-top: 10px;
    }
  }
  
  .report-preview-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
    }
    
    .report-preview {
      padding: 0 10px;
      
      .report-header {
        text-align: center;
        margin-bottom: 30px;
        
        h1 {
          margin-bottom: 10px;
          color: var(--text-color);
        }
        
        .report-meta {
          display: flex;
          justify-content: center;
          gap: 20px;
          color: var(--text-color-secondary);
        }
      }
      
      h2 {
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-color);
      }
      
      .report-summary {
        margin-bottom: 30px;
        
        p {
          line-height: 1.6;
          color: var(--text-color);
        }
      }
      
      .report-statistics {
        margin-bottom: 30px;
        
        .stats-graph {
          display: flex;
          justify-content: space-between;
          margin-top: 15px;
          
          .severity-distribution {
            width: 100%;
            
            .severity-label {
              font-weight: bold;
              margin-bottom: 10px;
              color: var(--text-color);
            }
            
            .severity-chart {
              .chart-bar {
                height: 30px;
                margin-bottom: 5px;
                border-radius: 4px;
                display: flex;
                align-items: center;
                padding: 0 10px;
                color: white;
                font-size: 14px;
                
                &.critical {
                  background-color: #F56C6C;
                }
                
                &.high {
                  background-color: #E6A23C;
                }
                
                &.medium {
                  background-color: #409EFF;
                }
                
                &.low {
                  background-color: #67C23A;
                }
              }
            }
          }
        }
      }
      
      .report-findings {
        margin-bottom: 30px;
      }
      
      .report-more-preview {
        padding: 40px 0;
        
        .empty-icon {
          font-size: 60px;
          color: var(--text-color-secondary);
        }
      }
    }
  }
}
</style> 